<template>
<view class="container">
  <scroll-view class="coupon-list" scroll-y="true" :scroll-top="scrollTop">

    <view v-for="(item, index) in couponList" :key="index" class="item" @tap="getCoupon" :data-index="item.id">
     <view class="tag">{{item.tag}}</view>
      <view class="content">
          <view class="left">
            <view class="discount">{{item.discount}}元</view>
            <view class="min"> 满{{item.min}}元使用</view>
          </view>
          <view class="right">
            <view class="name">{{item.name}}</view>
            <view class="desc">{{item.desc}}</view>
            <view class="time" v-if="item.days != 0">有效期：{{item.days}}天</view>
            <view class="time" v-else> 有效期：{{item.startTime}} - {{item.endTime}}</view>
          </view>
          <view class="couponbg"></view>
        </view>
    </view>

    <view class="page" v-if="showPage">
      <view :class="'prev ' + ( page <= 1 ? 'disabled' : '')" @tap="prevPage">上一页</view>
      <view :class="'next ' + ( (count / size) < page ? 'disabled' : '')" @tap="nextPage">下一页</view>
    </view>
  </scroll-view>
</view>
</template>

<script>
let util = require("../../utils/util.js");
let api = require("../../config/api.js");
let app = getApp();

export default {
  data() {
    return {
      couponList: [],
      page: 1,
      size: 10,
      count: 0,
      scrollTop: 0,
      showPage: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getCouponList();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getCouponList: function () {
      let that = this;
      that.setData({
        scrollTop: 0,
        showPage: false,
        couponList: []
      }); // 页面渲染完成

      uni.showToast({
        title: '加载中...',
        icon: 'loading',
        duration: 2000
      });
      util.request(api.CouponList, {
        page: that.page,
        size: that.size
      }).then(function (res) {
        if (res.errno === 0) {
          that.setData({
            scrollTop: 0,
            couponList: res.data.data,
            showPage: true,
            count: res.data.count
          });
        }

        uni.hideToast();
      });
    },

    getCoupon(e) {
      if (!app.globalData.hasLogin) {
        uni.navigateTo({
          url: "/pages/auth/login/login"
        });
      }

      let couponId = e.currentTarget.dataset.index;
      util.request(api.CouponReceive, {
        couponId: couponId
      }, 'POST').then(res => {
        if (res.errno === 0) {
          uni.showToast({
            title: "领取成功"
          });
        } else {
          util.showErrorToast(res.errmsg);
        }
      });
    },

    nextPage: function (event) {
      let that = this;

      if (this.page > that.count / that.size) {
        return true;
      }

      that.setData({
        page: that.page + 1
      });
      this.getCouponList();
    },
    prevPage: function (event) {
      if (this.page <= 1) {
        return false;
      }

      let that = this;
      that.setData({
        page: that.page - 1
      });
      this.getCouponList();
    }
  }
};
</script>
<style>
page {
  background: #f4f4f4;
  min-height: 100%;
}

.container {
  background: #f4f4f4;
  min-height: 100%;
  padding-top: 30rpx;
}

.coupon-list {
  width: 680rpx;
  height: auto;
  overflow: hidden;
}

.item {
  position: relative;
  height: 250rpx;
  width: 600rpx;
  background: linear-gradient(to right, #d8050f, #e68d08);
  margin-bottom: 10rpx;
  margin-left: 10rpx;
  margin-right: 30rpx;
  overflow:hidden;
  border-radius: 10rpx;
}

.item:before, .item:after {
  content: '.';
  width: 0;
  height: 200%;
  position: absolute;
  top: 20rpx;
} 

.item:before {
  border-right: 20rpx dotted #eeeeee;
  left: -10rpx;
  width: 1rpx;
}

.item:after {
  border-left: 20rpx dotted #eeeeee;
  right: -10rpx;
}


.tag {
  margin-left: 40rpx;
  height: 32rpx;
  background: #b8bb12;
  padding-left: 16rpx;
  padding-right: 16rpx;
  position: absolute;
  left: 20rpx;
  color: #fff;
  top: 20rpx;
  font-size: 20rpx;
  text-align: center;
  line-height: 32rpx;
}

.content {
  margin-left: 30rpx;
  display: flex;
  margin-right: 40rpx;
  flex-direction: row;
}

.content .left {
  padding-top: 50rpx; 
  flex: 1;
  border-right: 2rpx dashed rgba(230,230,230,.5);
}

.discount {
  font-size: 50rpx;
  color: #e9f814;
}

.min {
  color: #fff;
}

.content .right {
  padding: 11px 14px;
  width: 440rpx;
}

.name {
  font-size: 44rpx;
  color: #fff;
  margin-bottom: 14rpx;
}

.desc {
  font-size: 24rpx;
  color: #fff;
}

.time {
  font-size: 24rpx;
  color: #fff;
  line-height: 30rpx;
}

.couponbg{
  position: absolute;
  left: 20%;
  top: 95rpx;
  height: 290rpx;
  width: 730rpx;
  background-color: rgba(255,255,255,.15);
  transform: rotate(-20deg);
}

.condition {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 78rpx;
  background: rgba(0, 0, 0, 0.08);
  padding: 24rpx 40rpx;
  display: flex;
  flex-direction: row;
}

.condition .txt {
  display: block;
  height: 30rpx;
  flex: 1;
  overflow: hidden;
  font-size: 24rpx;
  line-height: 30rpx;
  color: #fff;
}

.condition .icon {
  margin-left: 30rpx;
  width: 24rpx;
  height: 24rpx;
}


.page {
  width: 750rpx;
  height: 108rpx;
  background: #fff;
  margin-bottom: 10rpx;
}

.page view {
  height: 108rpx;
  width: 50%;
  float: left;
  font-size: 29rpx;
  color: #333;
  text-align: center;
  line-height: 108rpx;
}

.page .prev {
  border-right: 1px solid #d9d9d9;
}

.page .disabled {
  color: #ccc;
}
</style>